<style>
#field_new_env .bottom {background-color:#e7eef8; vertical-align:middle;}
#field_new_env input {width:40px;}
#field_new_env label {margin: 2px 4px;}
#field_new_env a.btn {margin-left: 4px;}
#field_new_env li {list-style:none; margin: 2px;}
#field_new_env li:hover {text-decoration:underline;}
#field_new_env li span.delete_env{padding:2px;font-size:150%;}
#field_new_env li span.delete_env:hover{cursor:pointer;color:red;}
</style>
<script>
var category= {{<<json_dumps(settings.PARA.TEST_ENV_CATEGORY)}};
var minicomputer = {{<< json_dumps(settings.PARA.TEST_ENV_MINICOMPUTER)}};
var storage = {{<< json_dumps(settings.PARA.TEST_ENV_STORAGE)}};
var network = {{<< json_dumps(settings.PARA.TEST_ENV_NETWORK)}};
var type;
var number; //用来记忆新生成的input的编号

function get_value(value, data){
    for(var i=0; i<data.length; i++){
        if (value == data[i][0]) return data[i][1]; 
    }
}

function type_select(parent, options, type){
    parent = $(parent);
    var html = "<option value=''></option>";
    var v,k,t,el,tpl;
    $.each(options, function(j, value){
        if($.type(value) == 'array'){
            v = value[0];
            k = value[1];
        }else{
            v = value.value;
            k = value.text;
        }
        html = html + '<option value=' + v + '>' + k + '</option>'
    });
    if (type == '1'){
        tpl = '<label class="_add" for="select_type">型号</label><select class="_add" id="select_type"></select>'
            + '<label class="_add" for="input_amount">台数</label><input class="_add" id="input_amount"></input><label class="_add" for="input_unit">单台CPU数</label><input class="_add" id="input_unit"></input>';
    }else if(type == '2'){
        tpl = '<label class="_add" for="input_amount">台数</label><input class="_add" id="input_amount"></input><label class="_add" for="input_unit">单台CPU数</label><input class="_add" id="input_unit"></input>';
    }else if(type == '3'){
        tpl = '<label class="_add" for="select_type">存储类型</label><select class="_add" id="select_type"></select>'
            + '<label class="_add" for="input_amount">容量</label><input class="_add" id="input_amount"></input>';
    }else if(type == '4'){
        tpl = '<label class="_add" for="select_type">需求类型</label><select class="_add" id="select_type"></select>'
    }
    $('._add', parent).remove();
    $('#btn_add_env').before(tpl);
    $('#select_type').html(html);
}
$(function(){
    //初始化number
    number = $('#field_new_env li').size();
    var select = $('#select_env_category');
    select.change(function(){
        var v = $(this).val();
        if (v == '1'){   //小型机
            type_select('#field_new_env', minicomputer, '1');
        }else if (v == '2'){   //PC服务器
            type_select('#field_new_env', minicomputer, '2');
        }else if (v == '3'){    //存储
            type_select('#field_new_env', storage, '3');
        }else if (v == '4'){    //网络
            type_select('#field_new_env', network, '4');
        }
    });
    //绑定删除按钮
    $('#field_new_env').delegate('span.delete_env', 'click', function(){
        $(this).parent().remove();
    });
    $('#btn_add_env').click(function(e){
        e.preventDefault();
        //处理校验信息
        var v = select.val();
        var flag = false;
        var tpl;
        if (!v){
            alert('请选择“环境分类”');
        }
        var v1, v2, v3;
        v1 = $('#select_type').val();
        v2 = $('#input_amount').val();
        v3 = $('#input_unit').val();
        if (v == '1'){
            if (!v1) alert('请选择“型号”');
            else if(!v2) alert('请选择“台数”');
            else if(!v3) alert('请选择“单台CPU数”');
            else flag = true;
        }else if (v == '2'){
            if(!v2) alert('请选择“台数”');
            else if(!v3) alert('请选择“单台CPU数”');
            else flag = true;
        }else if (v == '3'){
            if (!v1) alert('请选择“存储类型”');
            else if(!v2) alert('请选择“容量”');
            else flag = true;
        }else if (v == '4'){
            if (!v1) alert('请选择“需求类型”');
            else flag = true;
        } 
        
        //检验成功则添加
        if (flag){
            if (v == '1'){
                tpl = '<li><span class="delete_env">&times;</span>'+get_value(v, category)
                    + ' 型号:'+get_value(v1, minicomputer)
                    + ' 台数:'+v2
                    + ' 单台CPU数:'+v3
                    + ' <input type="hidden" name="new_env_category_'+number+ '" value="' + v + '"></input>'
                    + ' <input type="hidden" name="new_env_type_'+number+ '" value="' + v1 + '"></input>'
                    + ' <input type="hidden" name="new_env_amount_'+number+ '" value="' + v2 + '"></input>'
                    + ' <input type="hidden" name="new_env_unit_'+number+ '" value="' + v3 + '"></input>'
                    + '</li>';
                    number++;
            }
            else if(v == '2'){
                tpl = '<li><span class="delete_env">&times;</span>'+get_value(v, category)
                    + ' 台数:'+v2
                    + ' 单台CPU数:'+v3
                    + ' <input type="hidden" name="new_env_category_'+number+ '" value="' + v + '"></input>'
                    + ' <input type="hidden" name="new_env_amount_'+number+ '" value="' + v2 + '"></input>'
                    + ' <input type="hidden" name="new_env_unit_'+number+ '" value="' + v3 + '"></input>'
                    + '</li>';
                    number++;
            }
            else if(v == '3'){
                tpl = '<li><span class="delete_env">&times;</span>'+get_value(v, category)
                    + ' 型号:'+get_value(v1, storage)
                    + ' 容量:'+v2
                    + ' <input type="hidden" name="new_env_category_'+number+ '" value="' + v + '"></input>'
                    + ' <input type="hidden" name="new_env_type_'+number+ '" value="' + v1 + '"></input>'
                    + ' <input type="hidden" name="new_env_amount_'+number+ '" value="' + v2 + '"></input>'
                    + '</li>';
                    number++;
            }
            else if(v == '4'){
                tpl = '<li><span class="delete_env">&times;</span>'+get_value(v, category)
                    + ' 需求类型:'+get_value(v1, network)
                    + ' <input type="hidden" name="new_env_category_'+number+ '" value="' + v + '"></input>'
                    + ' <input type="hidden" name="new_env_type_'+number+ '" value="' + v1 + '"></input>'
                    + '</li>';
                    number++;
            }
            $('#field_new_env div.new_env_content').append(tpl);
        }
    });
});
</script>